<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加点位</title>
    <style>
        .wu-inline > .form-group {
            margin-right: 0;
            margin-left: 0;
        }
    </style>
</head>
<body>

<div class="pos-r">
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 自动洗车
        <span class="c-gray en">&gt;</span>
        点位管理
        <span class="c-gray en">&gt;</span>
        添加点位
    </nav>
    <div>
        <div class="page-container">
            <form action="" method="post" class="form form-horizontal" id="auto-form-member-add">
                <div class="form-unit">基本信息</div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位名称：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="必填项" id="auto-add-shopName"
                               name="shopName">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位编号：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="必填项" id="auto-add-shopNo"
                               name="shopNo">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位地址：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="必填项" id="auto-add-shopAddr"
                               name="shopAddr">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位电话1：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="必填项" id="auto-add-shopPhone1"
                               name="shopPhone1">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位电话2：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="" id="auto-add-shopPhone2"
                               name="shopPhone2">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>点位电话3：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="" id="auto-add-shopPhone3"
                               name="shopPhone3">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>盒子UID：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="盒子UID,固定参数添加后无法修改"
                               id="auto-add-boxuid" name="boxUid">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>盒子编号：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <input type="text" class="form-control" value="" placeholder="盒子编号,固定参数添加后无法修改"
                               id="auto-add-boxNo" name="boxNo">
                    </div>
                </div>
                <div class="form-unit">配置信息</div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3"><span class="c-red"></span>获取经纬度：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <div class="form-inline wu-inline">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modal-map">
                                地图获取经纬度
                            </button>
                            <div class="form-group">
                                <input type="text" class="form-control" value="" placeholder="经度"
                                       id="auto-add-longitude" name="longitude">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" value="" placeholder="纬度" id="auto-add-latitude"
                                       name="latitude">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-unit">其他信息</div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3">点位描述：</label>
                    <div class="formControls col-xs-4 col-sm-4">
                        <textarea id="auto-add-shopDesc" name="shopDesc" cols="60" rows="5" class="textarea valid"
                                  placeholder="请输入门店的描述..."></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-4 col-sm-3">图片上传：</label>
                    <div class="formControls col-xs-8 col-sm-8">
                        <div class="uploader-list-container">
                            <input id="addAutoImg" name="file[]" multiple type="file" class="file-loading"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <input onclick="merchantAutoManageAddFun.submitAction();return false;"
                               class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;"/>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--地图模态框-->
<div class="modal fade modal-map" tabindex="-1" role="dialog" id="mapAutoModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <input type="text" id="autoWord">
            <button id="searchAutoWord">搜索</button>
            <div id="wuAutoTestMap" style="min-height: 700px;width: 100%"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //门店管理，添加服务
    var merchantAutoManageAddFun;

    merchantAutoManageAddFun = {
        init: function () {
            let _this = this;
            $("#store-add-addDesc").Huitextarealength({
                minlength: 10,
                maxlength: 300
            });
            _this.bootstrapvalidatorForm();
            /*加载地图*/
            var map = new BMap.Map("wuAutoTestMap");
            map.centerAndZoom("南京", 15);
            map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
            //单击获取点击的经纬度
            map.addEventListener("click", function (e) {
                $('#mapAutoModalLabel').modal('hide');
                $("#auto-add-longitude").val(e.point.lng);
                $("#auto-add-latitude").val(e.point.lat);

            });
            var local = new BMap.LocalSearch(map, {
                renderOptions: {map: map}
            });
            $('#searchAutoWord').on('click', function () {
                var val = $('#autoWord').val();
                local.search(val);
            })

            //给点位设置默认值
            $.ajax({
                type: "GET",
                url: "biz/getBizTenantByOne",
                dataType: "json",
                success: function (data) {
                    if (data.state) {
                        var json = data.data;
                        $("#auto-add-shopName").val(json.bizName);
                        $("#auto-add-shopPhone1").val(json.phone);
                        $("#auto-add-shopAddr").val(json.address);
                        $("#auto-add-shopDesc").val(json.bizDesc);
                    } else {
                        alert("error");
                    }
                },
                error: function () {
                    alert("error");
                }
            });

        },
        //表单提交
        submitAction: function () {
            //bootstrap验证
            var bootstrapValidator = $("#auto-form-member-add").data('bootstrapValidator');
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid())
                $("#auto-form-member-add").submit();
            else return;

            //验证


            //提交
            $.ajax({
                type: "GET",
                url: "biz/insertAutoWash",
                data: $("#auto-form-member-add").serialize(),
                dataType: "json",
                success: function (data) {
                    if (data.state) {
                        if (isChange) {//有图片上传的
                            extData = {"typeId": "shop_id", "relateId": data.data};
                            $("#addAutoImg").fileinput("upload");
                        }
                        layer.msg(data.message, {icon: 1});
                        //关闭新增窗口
                        removeIframe();
                        merchantAutoManageFun.searchAction();
                    }
                },
                error: function () {
                    alert("error");
                }
            });
        },
        //bootstrap验证
        bootstrapvalidatorForm: function () {
            $('#auto-form-member-add').bootstrapValidator({
                message: 'This value is not valid',
                excluded: [':disabled'],
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    shopName: {
                        validators: {
                            notEmpty: {
                                message: '门店名称不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 100,
                                message: '门店名称长度必须在2到100位之间'
                            }
                        }
                    },
                    shopNo: {
                        validators: {
                            notEmpty: {
                                message: '门店编号不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 20,
                                message: '门店编号长度必须在2到20位之间'
                            }
                        }
                    },
                    shopAddr: {
                        validators: {
                            notEmpty: {
                                message: '门店地址不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 200,
                                message: '门店地址长度必须在2到200位之间'
                            }
                        }
                    },
                    shopPhone1: {
                        validators: {
                            notEmpty: {
                                message: '门店电话1不能为空'
                            },
                            regexp: {
                                regexp: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
                                message: '门店电话1格式不正确'
                            }
                        }
                    },
                    shopPhone2: {
                        validators: {
                            regexp: {
                                regexp: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
                                message: '门店电话2格式不正确'
                            }
                        }
                    },
                    shopPhone3: {
                        validators: {
                            regexp: {
                                regexp: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
                                message: '门店电话3格式不正确'
                            }
                        }
                    },
                    boxUid: {
                        validators: {
                            notEmpty: {
                                message: '盒子UID不能为空'
                            }
                        }
                    },
                    boxNo: {
                        validators: {
                            notEmpty: {
                                message: '盒子编码不能为空'
                            }
                        }
                    },
                    longitude: {
                        validators: {
                            notEmpty: {
                                message: '经度不能为空'
                            },
                            regexp: {
                                regexp: /^-?((0|[1-9]\d?|1[1-7]\d)(\.\d{1,6})?|180(\.0{1,6})?)?$/,
                                message: '经度格式不正确'
                            }
                        }
                    },
                    latitude: {
                        validators: {
                            notEmpty: {
                                message: '纬度不能为空'
                            },
                            regexp: {
                                regexp: /^-?((0|[1-8]\d?)(\.\d{1,6})?|90(\.0{1,6})?)?$/,
                                message: '纬度格式不正确'
                            }
                        }
                    },
                    shopDesc: {
                        validators: {
                            notEmpty: {
                                message: '门店描述不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 500,
                                message: '门店描述长度必须在6到500位之间'
                            }
                        }
                    }
                }
            });
        }
    };

    var extData;
    var isChange;
    $("#addAutoImg").fileinput({
        language: "zh", //设置语言
        uploadUrl: "file/upload", //上传的地址
        allowedFileExtensions: ["jpg", "png", "gif"],//接收的文件后缀
        maxFileCount: 5,
        overwriteInitial: false,
        initialCaption: "请上传商品图片，第一张为封面图片",//文本框初始话value
        showUpload: false,//是否显示上传按钮
        showRemove: false,//是否显示删除按钮
        showCaption: true,//是否显示输入框
        browseClass: "btn btn-primary", //按钮样式
        enctype: "multipart/form-data",
        showPreview: true,
        uploadAsync: false,//多图片一次上传
        maxSize: 1024,//单位kb
        allowedPreviewTypes: ["image"],
        uploadExtraData: function () {
            return extData;
        }
    }).on("fileuploaded", function (event, data) {
        if (data.response.success == 0) {
            base.success("新增成功！");
            base.closeTab("新增商品");
        }
        else {
            base.error("新增成功，图片上传失败");
        }
    }).on("change", function (event) {
        isChange = true;
    }).on("fileloaded", function () {
        // $("#form-member-add").find(".file-thumbnail-footer").remove();
        // $("#form-member-add").find(".file-drop-zone-title").remove();
    });

    merchantAutoManageAddFun.init();
</script>
</body>
</html>